<template>
	<div class="shop-container">
		<div class="shop-header">
			<ShopHeader :isInput="dataArr.isInput" 
				:iconArr="dataArr.iconArr" 
				:placeholder="dataArr.placeholder"
				:aimUrl="dataArr.aimUrl"
				:rightUrl="dataArr.rightUrl"
			/>
		</div>
		<div class="header-swiper"> 
			<swiper :options="swiperOption">
			    <swiper-slide>
			    	<a target="_blank" href="http://www.wwtliu.com/blog">
			    		<img class="swiperimg" :src="carImg" alt="">
			    	</a>
			    </swiper-slide>
			    <swiper-slide>
			    	<img class="swiperimg" :src="carImg" alt="">
			    </swiper-slide>
			    <swiper-slide>
			    	<img class="swiperimg" :src="carImg" alt="">
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination">
			    </div>
			</swiper>
		</div>
		<div class="icon-nav-wrap">
			<div class="nav-wrap">
				<div class="nav-item">
					<router-link to="/shopping/newproduct">新品上市</router-link>
					<router-link to="/shopping/secondmall">二手商城</router-link>
				</div>
				<p class="icon-title">热销单品</p>
			</div>
		</div>
		<div class="hot-wrap">
			<div class="hot-item">
				<img src="../assets/images/shopping/chuwugui@3x.png" alt="">
				<p>储物柜</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/zhaomingdeng@3x.png" alt="">
				<p>照明灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/baozhen@3x.png" alt="">
				<p>抱枕</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/jingzi@3x.png" alt="">
				<p>镜子</p>
			</div>
		</div>
		<p class="title-item">家庭常用</p>
		<div class="home-wrap">
			<div class="hot-item">
				<img src="../assets/images/shopping/luodideng@3x.png" alt="">
				<p>落地灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/zhiwujia@3x.png" alt="">
				<p>储物架</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/aijiaodeng@3x.png" alt="">
				<p>矮脚灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/maojin@3x.png" alt="">
				<p>毛巾</p>
			</div>
		</div>
		<p class="title-item">家庭常用</p>
		<div class="home-wrap">
			<div class="hot-item">
				<img src="../assets/images/shopping/luodideng@3x.png" alt="">
				<p>落地灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/zhiwujia@3x.png" alt="">
				<p>储物架</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/aijiaodeng@3x.png" alt="">
				<p>矮脚灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/maojin@3x.png" alt="">
				<p>毛巾</p>
			</div>
		</div>
		<p class="title-item">家庭常用</p>
		<div class="home-wrap">
			<div class="hot-item">
				<img src="../assets/images/shopping/luodideng@3x.png" alt="">
				<p>落地灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/zhiwujia@3x.png" alt="">
				<p>储物架</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/aijiaodeng@3x.png" alt="">
				<p>矮脚灯</p>
			</div>
			<div class="hot-item">
				<img src="../assets/images/shopping/maojin@3x.png" alt="">
				<p>毛巾</p>
			</div>
		</div>
		<div class="zhanwei"></div>
		<FooterNav/>
	</div>
</template>
<script>
	import "../assets/iconfont/iconfont.css"
	import FooterNav from "../components/footernav"
	import ShopHeader from "../components/shopheader"
	export default{
		name:'news',
		data(){
			return{
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"",
							iconRight:"icon-gouwuche"
						}
					],
					placeholder:"搜索",
					aimUrl:"",
					rightUrl:"/shopping/shopcar"
				},
				carImg:require("../assets/images/shopping/banner@3x.png"),
				swiperOption: {
		          	pagination: {
					    el: '.swiper-pagination',
					},
					loop:true,
					autoplay: {
					    delay: 3000,
					    stopOnLastSlide: false,
					    disableOnInteraction: false,
					}
		        }
			}
		},
		components:{
			FooterNav,
			ShopHeader
		},
		methods:{
		}
	}
</script>
<style scoped lang="less">
	.shop-container{
		width: 100%;
		.shop-header{
			width: 100%;
			height: 44/50rem;
			background-color: #ff5555;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
			.header-wrap{
				width: 95%;
				height: 44/50rem;
				margin: 0 auto;
				display: flex;
				.left-wrap{
					height: 44/50rem;
					padding: 10px;
					line-height: 44/50rem;
				}
				.center-wrap{
					flex-grow:1;
					height: 44/50rem;
					line-height: 44 / 50rem;
					position: relative;
					input{
						width: 100%;
						height: 56 / 2 / 50rem;
						line-height: 56 / 2 / 50rem;
						border-radius: 4/50rem;
						border: none;
					    // opacity: 0.7;
					    font-size: 18 / 50rem;
					    text-indent: 32 / 50rem;
					    outline: none;
					    color: rgba(0,0,0,0.7);
					}
					.i-search{
						position: absolute;
						top: -1/50rem;
						left: 10/50rem;
						font-size: 18/50rem;
					}
				}
				.right-wrap{
					height: 44 / 50rem;
					width: 44 / 50rem;
					line-height: 44 / 50rem;
					text-align: center;
					.i-car{
						color: #ffffff;
						font-size: 26 / 50rem;
					}
				}
			}
		}
		.header-swiper{
			margin-top:  44 / 50rem;
			overflow: hidden;
			width: 100%;
			img{
				width: 100%;
				height: 301 / 2 / 50rem;
				float: left;
			}
		}
		.icon-nav-wrap{
			width: 100%;
			.nav-wrap{
				width: 95%;
				height: 175 / 2 / 50rem;
				margin: 0 auto;
				overflow-y: hidden;
				.nav-item{
					text-align: center;
					margin: 28 / 2 / 50rem 0;
					a{
						color: #fff;
						font-size: 15/50rem;
						display: inline-block;
						background-color: #f55;
						padding: 22/2/50rem 52/2/50rem;
						border-radius:40/2/50rem;
					}
					a:nth-child(2){
						margin-left: 86/2/50rem;
					}
				}
				p.icon-title{
					text-align: center;
					font-size: 13/50rem;
					color: rgba(0,0,0,.8);
					letter-spacing:3/50rem;
					font-weight: 700;
				}
			}
		}
		.hot-wrap,.home-wrap{
			width: 95%;
			height: 260/2/50rem;
			margin: 0 auto;
			box-shadow: 0 0  14/2/50rem rgba(0,0,0,.1);
			border-radius: 8/2/50rem;
			.hot-item{
				width:25%;
				height: 100%;
				float: left;
				text-align: center;
				overflow: hidden;
				img{
					width: 135/2/50rem;
					height: 135/2/50rem;
					margin-top: 36/2/50rem;
				}
				p{
					color: rgba(0,0,0,.8);
					font-size: 12/50rem;
					margin-top: 25/2/50rem;
					letter-spacing:3/50rem;
				}
			}
		}
		.title-item{
			text-align: center;
			font-size: 13 / 50rem;
			color: rgba(0,0,0,.8);
			letter-spacing:3 / 50rem;
			font-weight: 700;
			margin: 30 / 2 / 50rem 0;
		}
		.zhanwei{
			width: 100%;
			height: 140 / 2 / 50rem;
		}
	}
</style>